<template>
  <div class="home-container">
    <!-- 介绍-->
    <div class="introduction-container">
      <div class="top">
        <img alt="图标" src="../../public/home.svg">
        <h1>我是AI Example，很高兴见到你！</h1>
      </div>
      <span class="bottom">我可以帮你写代码、读文件、写作各种创意内容，请把你的任务交给我吧~</span>
    </div>
    <!-- 检索框 -->
    <Search custom-class="chat-container"></Search>
  </div>
</template>

<script setup>
import Search from '../components/Search.vue';

</script>

<style lang="less" scoped>
.home-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;

  .introduction-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .top {
      font-size: 18px;
      font-weight: 500;
      display: flex;
      gap: 14px;
      align-items: center;
      color: #fff;

      img {
        width: 60px;
        height: 60px;
      }
    }

    .bottom {
      display: inline-block;
      margin: 8px 0 20px;
      color: #f8faff;
      font-size: 14px;
    }
  }

  .chat-container {
    width: 60%;
  }
}
</style>
